<!--
- File:    首页.
-->
<template>
  <div>
    <div class="Web_Box" style="padding-top:88px;">
      <header class="heard">
        <div class=" xd top_bg">
          <div class="logo"><i class="iconfont icon-logo"></i></div>
          <!--<div class="search_index" style="width: 9.5rem">-->
          <!--<form action="" @submit="search">-->
          <!--<input type="search" style="width: 8rem;font-size: 14px;color: #fff;padding-left: .5rem;border: none;background: none;vertical-align: top;margin-top: 8px;" placeholder="请输入搜索关键字" autocomplete="off" v-model="keyword"><i class="iconfont icon-search" @click="search"></i>-->
          <!--</form>-->
          <!--</div>-->
          <div class="search_index" style="width: 9.5rem">
            <div class="search_sel"><i class="iconfont icon-triangle"></i>
              <select v-model="searchType">
                <option style="color: #999" value="0">商品</option>
                <option style="color: #999" value="1">文章</option>
              </select>
            </div>
            <form action="" @submit="search">
              <i class="iconfont icon-search" @click="search"></i><input type="search" autocomplete="off" v-model="keyword" placeholder="输入搜索关键字" style="font-size: 14px;color: #fff; padding-left: 15px;">
            </form>
          </div>
          <div class="location" @click="gotoLocationSelect">
            <p>{{location.name}}</p>
            <span>[切换城市]</span></div>
        </div>
        <div class="index_menu_box">
          <div class="index_menu">
            <div class="hline">
              <ul class="f-cb" style="width:20rem;">
                <li><a class="cur">推荐</a></li>
                <li><a @click="gotoClassifyGoods($dictionary.buyType.buy)">买花</a></li>
                <li><a @click="gotoClassifyGoods($dictionary.buyType.rent)">租花</a></li>
                <!--<li><a @click="gotoWikiList">植物资料</a></li>-->
                <li><a @click="gotoGarden">我的花园</a></li>
                <li><a @click="gotoDiaryList">遇见</a></li>
                <li><a @click="gotoArticleList">育花缘</a></li>
              </ul>
            </div>
          </div>
        </div>
      </header>
      <mt-swipe :auto="4000" class="banner swiper-container" style="height: 8rem" v-show="bannerList.length > 0">
        <mt-swipe-item class="swiper-slide" v-for="(item,index) in bannerList" :key="index">
          <div class="swiper-slide" @click="gotoUrl(item.p_url)">
            <img :src="$config.imgsite + $config.adImgSrc + item.image_src + '_w640h320'" alt=""/></div>
        </mt-swipe-item>
      </mt-swipe>

      <!--日记-->
      <div class="index_diary" v-show="diaryList.requested && diaryList.data.length > 0">
        <div class="act_tit f-cb">
          <span>遇见</span><a class="act_more" @click="gotoDiaryList">更多<i class="iconfont icon-more"></i></a></div>
        <!--心情日记-->
        <div class="diary_box f-cb">
          <div class="diary" v-for="diary in diaryList.data">
            <ul class=" f-cb">
              <li class="imgs" @click="gotoBlog(diary.member_id, '0')">
                <img :src="diary.member_avatar ? $config.imgsite + $config.avatarSrc + diary.member_avatar + '_w150' : defaultAvatar">
              </li>
              <li class="pl20 w480">
                <h3 class="d_tit"><span @click="gotoBlog(diary.member_id, '0')">{{diary.member_name}}</span></h3>
                <div class="blk_img2 photoBrowser">
                  <ul class="f-cb">
                    <li v-if="diary.images && diary.images.length > 0" v-for="(img, imgIndex) in diary.images" @click="showImg(diary.imgList, imgIndex)">
                      <img :src="$config.imgsite + $config.uploadImgSrc + img + '_w200'">
                    </li>
                  </ul>
                  <div class="g_cont pt15" v-show="diary.content">{{diary.content}}</div>
                  <div class="Locations"><span>{{diary.add_time | getDateDiff}}</span></div>
                </div>
              </li>
            </ul>
          </div>
          <!--心情日记 end-->

        </div>
      </div>
      <!--精品文章-->
      <div class="diary_box f-cb mt10" v-show="articleList.requested && articleList.data.length > 0">
        <div class="act_tit f-cb">
          <span>精品文章</span><a class="act_more" @click="gotoArticleList">更多<i class="iconfont icon-more"></i></a></div>
        <div class="articles_list f-cb" v-for="article in articleList.data" @click="gotoArticleDetail(article.id, article.is_sys)">
          <div class="art_tit slh">{{article.title}}</div>
          <div class="author">
            <!--<span class="au_img" @click.stop="gotoBlog(article.member_id, '1')"><img :src="article.member_avatar ? $config.imgsite + $config.avatarSrc + article.member_avatar + '_w150': defaultAvatar"></span>-->
            <span class="au_name" style="margin-right: 10px;" @click.stop="gotoBlog(article.member_id, '1')">{{article.member_name}}</span>
            <span v-if="index < 3" v-for="(tag,index) in article.d_ids" class="article-tag">{{tag.d_name}}</span><span v-if="article.d_ids.length > 3" class="article-tag">...</span>
          </div>
          <div style="margin-top: 10px;">
            <i class="iconfont icon-dianzan"></i>
            <span>{{article.up_count}}</span>
            <span style="margin-left: 15px;">阅读：{{article.read_count}}</span>
            <span class="au_time fr">{{article.add_time | timestampToDate('yyyy-MM-dd')}}</span>
          </div>
        </div>
      </div>
      <div class="activity" v-show="activeList.requested && activeList.data.length > 0">
        <div class="act_tit f-cb">
          <span>活动专区</span><a class="act_more" @click="gotoActiveList">更多<i class="iconfont icon-more"></i></a></div>
        <mt-swipe :auto="0" class="banner swiper-container" style="height: 11rem">
          <mt-swipe-item class="swiper-slide" v-for="(active,index) in activeList.data" :key="index">
            <div class="swiper-slide" @click="gotoGoodsList(active.groupbuy_id)">
              <div class="act_img"><h3>{{active.groupbuy_name}}</h3>
                <img :src="$config.imgsite + $config.activityImgSrc + storeId + '/' + active.groupbuy_image + '_w640h320'"/>
              </div>
              <div class="act_time" v-if="active.type == 1 && active.timeRemain && !(active.timeRemain.days < 0 || active.timeRemain.hours < 0 || active.timeRemain.minutes < 0 || active.timeRemain.seconds < 0)">
                <span class="lefs">距活动结束还有</span><span class="time_num">{{active.timeRemain.days}}</span><span class="company">天</span><span class="time_num">{{active.timeRemain.hours}}</span><span class="company">小时</span><span class="time_num">{{active.timeRemain.minutes}}</span><span class="company">分</span><span class="time_num">{{active.timeRemain.seconds}}</span><span class="company">秒</span>
              </div>
              <div class="act_time" v-if="active.type != 1">
                <span class="lefs">促销商品，限量抢购</span>
              </div>
            </div>
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <!--优惠券-->
      <div class="index_conpun" v-show="couponList.requested && couponList.data.length > 0">
        <div class="act_tit f-cb bg_fff">
          <span>优惠券</span><a class="act_more" @click="gotoMoreCoupon">更多<i class="iconfont icon-more"></i></a></div>
        <div class="couponlist f-cb" v-for="(coupon, couponIndex) in couponList.data" v-if="couponIndex < 2">
          <div class="fl">
            <p class="c_class">类型：{{coupon.voucher_t_type | couponTypeTxt}}</p>
            <p class="c_time">{{coupon.voucher_t_start_date | timestampToDate('yyyy.MM.dd')}}-{{coupon.voucher_t_end_date | timestampToDate('yyyy.MM.dd')}}</p>
            <p class="c_money">{{coupon.voucher_t_limit | couponUseTxt}}</p>
          </div>
          <div class="fr">
            <p class="c_price">￥<span>{{coupon.voucher_t_price}}</span></p>
            <div class="c_receive" @click="receiveCoupon(coupon.voucher_t_id)">立即领取</div>
          </div>
        </div>
      </div>
      <!--优惠券 end-->
      <!--活动 end-->
      <div class="bg_fff index_new" v-show="(hotGoodsList.requested || hotGoodsAd.requested) && (hotGoodsList.data.length > 0 || hotGoodsAd.data.length >0)">
        <div class="index_title">热销绿植</div>
        <div class="index_Selling">
          <div class="sell_box">
            <ul class="f-cb">
              <li class="sell_left" v-if="hotGoodsAd.data.length >= 1" @click="gotoGoodsDetail(hotGoodsAd.data[0].goods_commonid, $dictionary.buyType.rent)">
                <a><img :src="$config.imgsite + $config.adImgSrc + hotGoodsAd.data[0].image_src + '_w320h400'"></a></li>
              <li>
                <div class="protuct f-cb" v-if="hotGoodsAd.data.length >= 2" @click="gotoGoodsDetail(hotGoodsAd.data[1].goods_commonid, $dictionary.buyType.rent)">
                  <img :src="$config.imgsite + $config.adImgSrc + hotGoodsAd.data[1].image_src + '_w320h200'"></div>
                <div class="protuct f-cb bnone" v-if="hotGoodsAd.data.length >= 3" @click="gotoGoodsDetail(hotGoodsAd.data[2].goods_commonid, $dictionary.buyType.rent)">
                  <img :src="$config.imgsite + $config.adImgSrc + hotGoodsAd.data[2].image_src + '_w320h200'"></div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--热销种子Start-->
      <!--热销种子Start-->
      <div class="bg_fff pt20 mt20" v-show="hotGoodsList.requested && hotGoodsList.data.length > 0">
        <div class="CommodityClassification">
          <div class="con">
            <ul id="content">
              <li v-for="item in hotGoodsList.data" @click="gotoGoodsDetail(item.goods_commonid, $dictionary.buyType.buy)">
                <a>
                  <div class="pic">
                    <img :src="$config.imgsite + $config.goodsImgSrc + storeId + '/'+ item.goods_image + '_w200'" alt=""/>
                  </div>
                  <h3 class="slh2">{{item.goods_name}}</h3>
                  <p class="Price">￥{{item.goods_price | discount(item.groupbuy_rebate)}}<span class="yj">￥{{item.goods_marketprice}}</span>
                  </p>
                </a></li>
            </ul>
          </div>
          <div class="loadmore" @click="gotoClassify($dictionary.buyType.buy)">查看更多</div>
        </div>
      </div>
      <!--热销种子End-->
      <!--热销种子End-->
      <!--新品推荐Start-->
      <!--新品推荐Start-->
      <div class="bg_fff index_new mt10" v-show="(newGoodsList.requested || newGoodsAd.requested) && (newGoodsList.data.length > 0 || newGoodsAd.data.length >0)">
        <div class="index_title">租赁新品</div>
        <div class="index_Selling">
          <div class="sell_box">
            <ul class="f-cb">
              <li class="sell_left" v-if="newGoodsAd.data.length >= 1" @click="gotoGoodsDetail(newGoodsAd.data[0].goods_commonid, $dictionary.buyType.rent)">
                <a><img :src="$config.imgsite + $config.adImgSrc + newGoodsAd.data[0].image_src + '_w320h400'"></a></li>
              <li>
                <div class="protuct f-cb" v-if="newGoodsAd.data.length >= 2" @click="gotoGoodsDetail(newGoodsAd.data[1].goods_commonid, $dictionary.buyType.rent)">
                  <img :src="$config.imgsite + $config.adImgSrc + newGoodsAd.data[1].image_src + '_w320h200'"></div>
                <div class="protuct f-cb bnone" v-if="newGoodsAd.data.length >= 3" @click="gotoGoodsDetail(newGoodsAd.data[2].goods_commonid, $dictionary.buyType.rent)">
                  <img :src="$config.imgsite + $config.adImgSrc + newGoodsAd.data[2].image_src + '_w320h200'"></div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--新品推荐Start-->
      <div class="bg_fff pt20 mt20" v-show="newGoodsList.requested && newGoodsList.data.length > 0">
        <div class="CommodityClassification">
          <div class="con">
            <ul>
              <li v-for="item in newGoodsList.data" @click="gotoGoodsDetail(item.goods_commonid, $dictionary.buyType.rent)">
                <a>
                  <div class="pic">
                    <img :src="$config.imgsite + $config.goodsImgSrc + storeId + '/' + item.goods_image + '_w200'" alt=""/>
                  </div>
                  <h3 class="slh2">{{item.goods_name}}</h3>
                  <p class="Price">￥{{item.goods_price | discount(item.groupbuy_rebate)}}<span class="cr_898989 f12">/月</span>
                  </p>
                </a></li>
            </ul>
          </div>
          <div class="loadmore" @click="gotoClassify($dictionary.buyType.rent)">查看更多</div>
        </div>
      </div>
      <!--新品推荐End-->
    </div>
    <draggable @start="dragStart" @end="dragEnd">
      <img id="kf" @click="gotoContact" style="z-index: 98; width: 50px; height: 50px;position: fixed; left: 80%; top: 80%;" :src="$config.website + '/wap/static/images/kf.png'"/>
      <!--<img id="kf" onclick="window.location.href='http://wodinghua.net/wap/static/custom/custom.html'" style="z-index: 98; width: 50px; height: 50px;position: fixed; left: 80%; top: 70%;" src="http://wodinghua.net/wap/static/images/kf.png"/>-->
    </draggable>
    <!--下拉显示更多提示-->
    <pull-more-promt :show="pullMoreShow"></pull-more-promt>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import HotNews from '../components/hot-news.vue'
  import PullMorePromt from '../components/pullMoreNotice'
  import {Swipe, SwipeItem} from 'mint-ui'
  //  import {mapModules, mapRules} from 'vuet'
  import * as storage from '../storage'
  import {imgPreview} from '../components/previewer'
  //  import config from '../config'
  import draggable from 'vuedraggable'

  export default{
    beforeRouteEnter (to, from, next) {
      let location = storage.getLocation()
//      let store = storage.getStore()
      if (!location) {
        next({name: 'location-select'})
      }
//      if (!store && !to.query.storeId) { // 没有存储有选择的店铺且没有指定要浏览的店铺，则跳到店铺选择页
//        next({name: 'store-list'})
//      }
      next()
    },
//    mixins: [
//      mapModules({goodsClassList: 'goodsClassList'}),
//      mapRules({once: 'goodsClassList'})
//    ],
    data() {
      return {
        defaultAvatar: require('../assets/images/avatar.png'),
        fromScan: this.$route.query.from_scan == 'true', // 扫码进来的
        storeId: this.$route.query.storeId || this.$utils.getQueryString('storeId') || this.$storage.getStore() || this.$config.storeId,
        location: this.$storage.getLocation(),
        keyword: '',
        searchType: '0', // 0 搜索商品， 1 搜索文章
        blogType: '1', // 1 心情日记， 2 精品文章
        bannerList: [],
        noticeList: [],
        diaryList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}, // 心情日记
        articleList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}, // 精品文章
        panicBuyingList: [],
        newGoodsAd: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 3, data: []}, // 新品推荐广告位
        hotGoodsAd: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 3, data: []}, // 热销广告位
        newGoodsList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 4, data: []},
        hotGoodsList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 4, data: []},
        searchKeyword: '',
        pullMoreShow: false,
        activeList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        countdownInterval: null,
        couponList: {requested: false, data: []}
      }
    },
    components: {
      'mtSwipe': Swipe,
      'mtSwipeItem': SwipeItem,
      'hotNews': HotNews,
      'pullMorePromt': PullMorePromt,
      'draggable': draggable
    },
    beforeDestroy() {
      clearInterval(this.countdownInterval)
    },
    created() {
      this.getBannerList()
      this.getNoticeList()
      this.getDiaryList()
      this.getArticleList()
      this.getNewGoodsAd(this.newGoodsAd.page, this.newGoodsAd.pageSize)
      this.getHotGoodsAd(this.hotGoodsAd.page, this.hotGoodsAd.pageSize)
      this.getNewGoodsList(this.newGoodsList.page, this.newGoodsList.pageSize)
      this.getHotGoodsList(this.hotGoodsList.page, this.hotGoodsList.pageSize)
//      this.initWelcome()
      this.getActiveList(this.activeList.page, this.activeList.pageSize)
      this.getCouponList()
    },
    mounted() {
      console.log('storeId:', this.$utils.getQueryString('storeId'))
      document.addEventListener('touchmove', this.$utils.throttle2(this.touchMoveFunc, 100), false)
      document.addEventListener('scroll', this.$utils.throttle2(this.scrollMoveFunc, 100), false)
      this.$native.weixinShare(window.location.href, '遇花园', null, '绿植商城')
    },
    methods: {
      scrollMoveFunc() {
        this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      },
      touchMoveFunc(evt) {
        try {
          // evt.preventDefault() // 阻止触摸时浏览器的缩放、滚动条滚动等
          var touch = evt.touches[0] // 获取第一个触点
          this.x = Number(touch.pageX) // 页面触点X坐标
          this.y = Number(touch.pageY) // 页面触点Y坐标
        } catch (e) {
          console.log('touchMoveFunc：' + e.message)
        }
      },
      dragStart(data) {
      },
      dragEnd(data) {
        document.getElementById('kf').style.top = (this.y - this.scrollTop - 25) + 'px'
        document.getElementById('kf').style.left = (this.x - 25) + 'px'
      },
      gotoContact() {
        this.$router.push({name: 'store-contact'})
      },
      gotoUrl(url) {
        if (url != '') {
          window.location.href = url // eslint-disable-line
        }
      },
      gotoLocationSelect() {
        this.$router.push({name: 'location-select'})
      },
      gotoClassifyGoods(buyType) {
        let routerName = ''
        switch (buyType) {
          case this.$dictionary.buyType.buy:
            routerName = 'classify-buy'
            break
          case this.$dictionary.buyType.rent:
            routerName = 'classify-rent'
            break
          case this.$dictionary.buyType.integral:
            routerName = 'classify-integral'
            break
        }
        this.$router.push({name: routerName, query: {storeId: this.storeId, buyType: buyType}})
      },
      gotoClassify(buyType) {
        this.$router.push({name: 'goods-list', query: {storeId: this.storeId, buyType: buyType}})
      },
      gotoActiveList() {
//        this.$router.push({name: 'active-list', query: {storeId: this.storeId}})
        window.location.href = 'http://' + window.location.host + '/wap/active/list?storeId=' + this.storeId // ios微信分享要如此跳转后才能正确分享
      },
      gotoWikiList() {
        this.$router.push({name: 'wiki-list', query: {action: 'view'}})
      },
      gotoGoodsList(id) {
        this.$router.push({name: 'active-goods-list', params: {id: id}})
      },
      gotoArticleDetail(id, isSys) {
        if (isSys == '0') { // 手机端发布的文章
//          this.$router.push({name: 'article-detail', params: {id: id}})
          window.location.href = 'http://' + window.location.host + '/wap/blog/article/detail/' + id // ios微信分享要如此跳转后才能正确分享
        }
        if (isSys == '1') { // 后台发布的文章
//          this.$router.push({name: 'article-detail2', params: {id: id}})
          window.location.href = 'http://' + window.location.host + '/wap/blog/article/detail2/' + id // ios微信分享要如此跳转后才能正确分享
        }
      },
      gotoDiaryList() {
        this.$router.push({name: 'diary-list'})
      },
      gotoArticleList() {
        this.$router.push({name: 'article-list', qeury: {type: this.$dictionary.articleType.special}})
      },
      gotoGarden() {
        this.$router.push({name: 'garden-list'})
      },
      gotoMoreCoupon() {
        this.$router.push({name: 'coupon-store', params: {id: this.storeId}})
      },
      getCouponList() {
        this.$request.getStoreCouponList(this.storeId).then(data => {
          this.couponList.data = data
        }).finally(() => {
          this.couponList.requested = true
        })
      },
      receiveCoupon(couponId) {
        this.$request.receiveCoupon(couponId).then(data => {
          this.$toast('领取成功')
        }).catch(e => {
          this.$toast('领取失败:' + e.msg)
        })
      },
      search(e) {
        e.preventDefault()
        if (this.searchType == '0') {
          this.$router.push({
            name: 'goods-list',
            query: {storeId: this.storeId, buyType: this.$dictionary.buyType.buy, keyword: this.keyword}
          })
        }
        if (this.searchType == '1') {
          this.$router.push({
            name: 'article-list',
            query: {keyword: this.keyword}
          })
        }
      },
      initWelcome() {
        if (this.$storage.getWelcomed()) { // 每次会话只显示一次
          return
        }
        this.$storage.setWelcomed(true)
        Promise.all([this.$request.getMemberName(), this.$request.getInviterInfo()]).then(response => {
          let userName = response[0] && response[0].member_name ? response[0].member_name : ''
          let inviterName = response[1] ? response[1] : ''
          let message = ''
          if (this.fromScan) { // 扫码进来的
            message = '<p>您的邀请人：' + inviterName + '</p><p style=" color:#000;">祝您购物愉快！</p>'
          } else {
            message = '<h3 style="height:40px; color:#000;">您好！' + userName + '</h3><p style=" color:#000;">欢迎进入商城，祝您购物愉快！</p>'
          }
          this.$messageBox.alert(message, {
            confirmButtonText: '好的'
          }).then(action => {
            this.pullMoreShow = true
          })
        }).catch(e => {
          console.error('获取用户信息或上级信息失败', e)
        })
      },
      getInviterInfo() {
        this.$request.getInviterInfo().then(data => {
          if (data) {
            this.inviter = data
          }
        })
      },
      gotoNoticeList() {
        this.$router.push({name: 'notice-list'})
      },
      gotoGoodsDetail(goodsCommonid, buyType) {
//        this.$router.push({
//          name: 'goods-detail',
//          params: {id: goodsCommonid},
//          query: {storeId: this.storeId, buyType: buyType}
//        })
        window.location.href = 'http://' + window.location.host + '/wap/goods/detail/' + goodsCommonid + '?storeId=' + this.storeId + '&buyType=' + buyType // ios微信分享要如此跳转后才能正确分享
      },
      gotoBlog(memberId, showType) {
        this.$router.push({name: 'blog-index', query: {member: memberId, showType: showType}})
      },
      getBannerList() {
        this.$request.getAdvList(this.storeId).then(data => {
          this.bannerList = data
        })
      },
      showImg(imgList, index) {
        imgPreview({imgList: imgList, index: index})
      },
      getImgListWH(imgList) {
        for (let i = 0; i < imgList.length; i++) {
          this.$utils.imgLoaded(imgList[i].src).then(img => {
            imgList[i].w = img.width
            imgList[i].h = img.height
          })
        }
      },
      getDiaryList() {
        this.diaryList.loading = true
        this.$request.getDiaryList(1, 3).then(data => {
          for (let i = 0; i < data.length; i++) {
            if (!data[i].images) {
              continue
            }
            data[i].imgList = [] // 新定义一个数组列表，格式为photeswipe所需要的格式
            for (let j = 0; j < data[i].images.length; j++) {
              let src = this.$config.imgsite + this.$config.uploadImgSrc + data[i].images[j] + '_gdw640'
              let img = {src: src, w: 800, h: 600} // 设置为photeswipe 需要的格式，先给图片个默认宽高
              data[i].imgList.push(img)
            }
            this.getImgListWH(data[i].imgList) // 异步获取图片的实际宽高
          }
          this.diaryList.data = data
        }).finally(() => {
          this.diaryList.requested = true
          this.diaryList.loading = false
        })
      },
      getArticleList() {
        this.articleList.loading = true
        this.$request.getArticleList(1, 4, this.$dictionary.articleType.special).then(data => {
          this.articleList.data = data
        }).finally(() => {
          this.articleList.requested = true
          this.articleList.loading = false
        })
      },
      // 去除iframe字符串的宽高
      resetIframWH(html) {
        html = html.replace(/height=\d+/g, '')
        html = html.replace(/width=\d+/g, 'width="100%"')
        return html
      },
      getNoticeList() {
        this.$request.getNoticeList(this.storeId).then(data => {
          this.noticeList = data
        })
      },
      getNewGoodsAd(page, pageSize) {
        this.newGoodsAd.loading = true
        this.$request.getNewGoodsAd(this.storeId, page, pageSize).then(data => {
          if (data.length < this.newGoodsAd.pageSize) {
            this.newGoodsAd.allLoaded = true
          }
          this.newGoodsAd.data = [...this.newGoodsAd.data, ...data]
        }).finally(() => {
          this.newGoodsAd.requested = true
          this.newGoodsAd.loading = false
        })
      },
      getHotGoodsAd(page, pageSize) {
        this.hotGoodsAd.loading = true
        this.$request.getHotGoodsAd(this.storeId, page, pageSize).then(data => {
          if (data.length < this.hotGoodsAd.pageSize) {
            this.hotGoodsAd.allLoaded = true
          }
          this.hotGoodsAd.data = [...this.hotGoodsAd.data, ...data]
        }).finally(() => {
          this.hotGoodsAd.requested = true
          this.hotGoodsAd.loading = false
        })
      },
      getNewGoodsList(page, pageSize) {
        this.newGoodsList.loading = true
        this.$request.getGoodsByClassify({
          gc_id: this.$dictionary.buyType.rent,
          page: page,
          pageSize: pageSize,
          new_order: '1', // 按上架时间排序
          store_id: this.storeId
        }).then(data => {
          if (data.length < this.newGoodsList.pageSize) {
            this.newGoodsList.allLoaded = true
          }
          this.newGoodsList.data = [...this.newGoodsList.data, ...data]
        }).finally(() => {
          this.newGoodsList.requested = true
          this.newGoodsList.loading = false
        })
      },
      getHotGoodsList(page, pageSize) {
        this.hotGoodsList.loading = true
        this.$request.getGoodsByClassify({
          gc_id: this.$dictionary.buyType.buy,
          page: page,
          pageSize: pageSize,
          sale_order: '1', // 按销量排序
          store_id: this.storeId
        }).then(data => {
          if (data.length < this.hotGoodsList.pageSize) {
            this.hotGoodsList.allLoaded = true
          }
          this.hotGoodsList.data = [...this.hotGoodsList.data, ...data]
        }).finally(() => {
          this.hotGoodsList.requested = true
          this.hotGoodsList.loading = false
        })
      },
      loadMoreHotGoods() {
        if (this.hotGoodsList.loading || this.hotGoodsList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getHotGoods(this.storeId, ++this.hotGoodsList.page, this.hotGoodsList.pageSize)
        }, 500)
      },
      getActiveList(page, pageSize) {
        this.activeList.loading = true
        this.$request.getPanicBuyingList(this.storeId, page, pageSize).then(data => {
          if (data.length < this.activeList.pageSize) {
            this.activeList.allLoaded = true
          }
          this.activeList.data = [...this.activeList.data, ...data]
          clearInterval(this.countdownInterval)
          this.countdownInterval = setInterval(() => {
            for (let i = 0; i < this.activeList.data.length; i++) {
              let timeRemain = this.$utils.getTimeRemain(this.activeList.data[i].end_time)
              this.$set(this.activeList.data[i], 'timeRemain', timeRemain)
            }
          }, 1000)
        }).finally(() => {
          this.activeList.requested = true
          this.activeList.loading = false
        })
      }
    }
  }
</script>

<style>
  .search_index input::-webkit-input-placeholder {
    color: #fff;
  }

  .search_index i {
    font-size: 20px;
    color: #fff;
    line-height: 34px;
  }

  .article-tag {
    margin-left: 5px;
    background-color: #3dbb6e;
    color: #fff;
    font-size: 12px;
    padding: 0 5px;
    border-radius: 3px;
    vertical-align: middle
  }
</style>
